<div w-i18n-ns="app.wallet.assets" class="toolbar">
    <w-button class="submit medium btn-send" on-click="$ctrl.showSend()">
        <span w-i18n="send"></span>
    </w-button>

    <w-button class="interface btn-receive" on-click="$ctrl.showReceivePopup()">
        <span w-i18n="directives.asset.receive"></span>
    </w-button>

    <w-analytics event="'Wallet Assets JSON Click'" event-target="'ui'">
        <w-button ng-if="$ctrl.advancedMode" on-click="$ctrl.openAnyTxModal()" class="interface btn-json">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
                <path d="M4.394 1.7a.591.591 0 1 1 0 1.182c-.665 0-1.182.517-1.182 1.182v1.182a2.35 2.35 0 0 1-.82 1.772c.498.435.82 1.066.82 1.773v1.182c0 .665.517 1.182 1.182 1.182a.591.591 0 1 1 0 1.181A2.372 2.372 0 0 1 2.03 9.973V8.79A1.167 1.167 0 0 0 .807 7.609a.591.591 0 0 1-.115-.02.591.591 0 0 1-.257-.141.591.591 0 0 1 .413-1.018c.666 0 1.182-.517 1.182-1.182V4.066c0-1.3 1.065-2.364 2.364-2.364V1.7zm5.15.002a2.372 2.372 0 0 1 2.424 2.364v1.182c0 .665.517 1.182 1.182 1.182a.591.591 0 1 1 0 1.181c-.665 0-1.182.517-1.182 1.182v1.182c0 1.3-1.064 2.364-2.364 2.364a.591.591 0 1 1 0-1.182c.665 0 1.182-.517 1.182-1.182V8.793c0-.707.323-1.338.82-1.772a2.35 2.35 0 0 1-.82-1.773V4.066c0-.665-.517-1.182-1.182-1.182a.592.592 0 0 1-.06-1.182z"/>
            </svg>
            <span class="btn-icon" w-i18n="directives.asset.anyTx"></span>
        </w-button>
    </w-analytics>
</div>

<div w-i18n-ns="app.wallet.assets" class="assets-wrapper">
    <div class="chart-rate" w-toggle-class-container>

        <div class="toolbar">
            <div>
                <w-radio-wrap class="toolbar-balance-radio"
                              mode="tab-mode"
                              ng-model="$ctrl.activeChartAssetId">
                    <w-radio ng-repeat="asset in $ctrl.chartAssetList track by asset.id"
                             value="::asset.id">
                        <span class="radio-name">{{::asset.name}}<span class="radio-dot">•</span></span>
                        <span class="radio-symb">$</span>
                        <w-change-rate asset-id="::asset.id"></w-change-rate>
                    </w-radio>
                </w-radio-wrap>

                <w-select class="toolbar-balance-select"
                          ng-model="$ctrl.activeChartAssetId">
                    <w-option w-add-class ng-repeat="asset in $ctrl.chartAssetList track by asset.id"
                              value="::asset.id">
                        <span class="radio-name">{{::asset.name}}</span>
                    </w-option>
                </w-select>
            </div>

            <div class="date-btns">
                <w-radio-wrap mode="tab-mode" ng-model="$ctrl.chartMode">
                    <w-radio value="'day'" w-add-class>
                        <span w-i18n="chart.intervals.day"></span>
                    </w-radio>
                    <w-radio value="'week'" w-add-class>
                        <span w-i18n="chart.intervals.week"></span>
                    </w-radio>
                    <w-radio value="'month'" w-add-class>
                        <span w-i18n="chart.intervals.month"></span>
                    </w-radio>
                </w-radio-wrap>
            </div>
        </div>

        <i class="toggler" w-toggle-class></i>

        <div class="chart-info">
            <div class="rate">
                <h1>
                    $&nbsp;<w-change-rate asset-id="$ctrl.activeChartAssetId"></w-change-rate>
                </h1>
                <div class="tag-1 info-500">
                    <span w-i18n="price" params="{currency: $ctrl.activeChartBalance.asset.name.toUpperCase()}"></span>
                </div>
            </div>
            <div class="change">
                <h1>{{$ctrl.change > 0 ? '+' : '-'}}$ {{$ctrl.abs($ctrl.change)}}</h1>
                <div class="tag-1 info-500">
                    <span w-i18n="since.{{$ctrl.chartMode}}"></span>&nbsp;(USD)
                </div>
            </div>
            <div class="change-percent">
                <h1>{{$ctrl.change > 0 ? '+' : '-'}}{{$ctrl.abs($ctrl.changePercent)}}%</h1>
                <div class="tag-1 info-500">
                    <span w-i18n="since.{{$ctrl.chartMode}}"></span>&nbsp;(%)
                </div>
            </div>
        </div>

        <div class="chart-wrapper">
            <linechart ng-if="$ctrl.chartMode && $ctrl.data" options="$ctrl.options" data="$ctrl.data"></linechart>
        </div>
    </div>

    <div class="assets-list">
        <w-asset ng-repeat="balance in $ctrl.pinnedAssetBalances track by balance.asset.id"
                 on-click="$ctrl.onAssetActionClick(event, balance.asset, action)"
                 on-unpin-click="$ctrl.unpin(balance.asset)"
                 balance="balance"></w-asset>

        <div class="new-asset" ng-click="$ctrl.newAssetOnClick()" role="button">
            <span></span>
        </div>
    </div>
</div>
